<template>
  <div class="home">
    <aside class="meun" v-if="userInfo" ref="meun">
      <section class="top">
        <div class="avatar">
          <img ref="avatar" :src="headPortrait" alt="" @click="chooseImage">
          <input type="file" accept="image/*" @change="resizeImage($event)">
        </div>
        <div class="donation">
          <div class="bg"></div>
          <p>￥{{this.userInfo.money}}</p>
          <span>善款</span>
        </div>
      </section>
      <li v-for="(meun, index) in meuns" :key="index" @click="meun.click">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="meun.icon"></use>
        </svg>
        <p>{{ meun.title }}</p>
        <svg class="icon qianjin" aria-hidden="true">
          <use xlink:href="#icon-qianjin"></use>
        </svg>
        <div v-if="meun.title === '我的目标'" class="mark"
        :style="{backgroundImage: `url(${aimUrl})`}"></div>
        <div v-if="meun.title === '我的调查'" class="mark fix">{{ mySurveyNum }}</div>
      </li>
    </aside>
    <div class="wrapper" ref="wrapper">
    <router-view v-transition class="main" :card="card" @showMeun="showMeun" @goSurvey="goSurvey" @hide="hide"></router-view>
    </div>
    <div v-if="tips.show" class="tips-home">
      <div class="box" ref="box">
        <div class="message">{{tips.message}}</div>
        <div class="choose" @click="tips.click">{{tips.choose}}</div>
        <div class="cancel" @click="cancel">取消</div>
      </div>
    </div>
    <div v-if="avatars" class="tips-home">
      <div class="box" ref="avatars">
        <div class="choose blue fix">拍照</div>
        <div class="choose blue">从手机相册选择</div>
        <div class="cancel" @click="cancelImage">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import {getUserInfo} from '@/api/login'
import {uploadImage} from '@/api/image'
import {changeHead} from '@/api/user'
import {mapState} from 'vuex'

export default {
  name: 'home',
  data () {
    return {
      aimImgUrl: '',                             // 我的目标一栏小图Url
      meuns: [
        {
          icon: '#icon-shouye-copy',
          title: '首页',
          click: this.goHome
        },
        {
          icon: '#icon-mubiaojihua',
          title: '我的目标',
          click: this.goAim
        },
        {
          icon: '#icon-crmtubiao71',
          title: '我的团队',
          click: this.goGroup
        },
        {
          icon: '#icon-bianji',
          title: '我的调查',
          click: this.goMySurvey
        },
        {
          icon: '#icon-bangzhu',
          title: '反馈与帮助',
          click: this.goHelp
        },
        {
          icon: '#icon-tuichu',
          title: '退出',
          click: this.close
        }
      ],                                         // 菜单显示内容
      tips: {
        show: false,
        message: '',
        choose: '',
        click: null
      },                                         // 提示信息控制
      avatars: false,                            // 头像
      headPortrait: '/static/images/user.png',   // 头像实际url
      vuegConfig: {
        forwardAnim: 'fadeInRight',
        backAnim: 'fadeInLeft'
      },                                         // vug动画效果
      card: [],                                         // 用户的TaskList列表，需初始化(这里是我模拟的数据)
      hideIndex: null,                            // 需隐藏的问卷在数组中的位置
      mySurveyNum: 0        //  我的调查问卷数量
    }
  },
  created () {
    this.initial()
  },
  computed: mapState({
    userInfo: state => state.userInfo            // vux中的全局变量userInfo
  }),
  methods: {
    changeAimImgUrl (imgUrl) {
      alert(imgUrl)
      this.aimImgUrl = 'http://47.97.102.73/giraffe' + imgUrl
    },
    resizeImage (e) {
      let file = e.target.files[0]
      window.lrz(file)
      .then(rst => {
        this.$refs.avatar.src = rst.base64
        return rst
      })
      .then(rst => {
        uploadImage(rst.formData)
        .then(rst => {
          let avatarUrl = rst.data.data
          let formData = {
            data: {
              uid: localStorage.uid,
              headUrl: avatarUrl
            },
            token: localStorage.token
          }
          changeHead(JSON.stringify(formData))
        })
      })
    },                                           // 上传头像
    initial () {
      let formData = {
        data: {uid: localStorage.uid},
        token: localStorage.token
      }
      getUserInfo(JSON.stringify(formData)).then(
        (data) => {
          if (data.data.code === 200) {
            this.$store.dispatch('setUserInfo', data.data.data)
            this.headPortrait = this.BASE_IMG_URL + data.data.data.headPortrait
            this.aimImgUrl = `http://47.97.102.73/giraffe${data.data.data.organizationRespVo.imgUrl}`
            this.aimUrl = `http://47.97.102.73/giraffe${data.data.data.organizationRespVo.imgUrl}`
            this.mySurveyNum = data.data.data.mySurveyNum
          } else if (data.data.code === 6002) {
            this.$router.push({name: 'login'})
          }
        }
      )
    },                                           // 初始化数据
    choose () {
      this.card.splice(this.hideIndex, 1)
      this.cancel()
    },                                           // 提示内容中的确定选项
    hide (index) {
      this.hideIndex = index
      this.tips.show = true
      this.tips.message = '你想永久隐藏这个调查吗?'
      this.tips.choose = '隐藏'
      this.tips.click = this.choose
      setTimeout(() => {
        this.$refs.box.className = 'box active'
      }, 100)
    },                                           // 隐藏问卷
    cancel () {
      this.$refs.box.className = 'box'
      setTimeout(() => {
        this.tips.show = false
        this.tips.message = ''
        this.tips.choose = ''
        this.tips.click = null
      }, 300)
    },                                           // 提示内容中的取消选项
    showMeun () {
      if (this.$refs.meun.className === 'meun') {
        this.$refs.meun.className = `meun show`
        this.$refs.wrapper.className = `wrapper fix`
      } else {
        this.$refs.meun.className = `meun`
        this.$refs.wrapper.className = `wrapper`
      }
    },                                           // 显示菜单
    goHome () {
      this.$router.push({
        name: 'homeIndex'
      })
      this.showMeun()
    },                                           // 返回首页
    goAim () {
      this.$router.push({
        name: 'aim'
      })
      this.showMeun()
    },                                           // 进入我的公益组织(我的目标)
    goSurvey () {
      this.$router.push({
        name: 'surveyIndex'
      })
    },                                           // 进入创建调查问卷
    goHelp () {
      this.$router.push({
        name: 'help'
      })
      this.showMeun()
    },                                           // 进入帮助页面
    goMySurvey () {
      this.$router.push({name: 'mySurvey'})
      this.showMeun()
    },                                           // 进入我的问卷
    goGroup () {
      this.$router.push({
        name: 'groupIndex'
      })
      this.showMeun()
    },                                           // 进入我的团队页面
    close () {
      this.tips.show = true
      this.tips.message = '你确定要退出全民公益吗？'
      this.tips.choose = '退出'
      this.tips.click = this.quit
      setTimeout(() => {
        this.$refs.box.className = 'box active'
      }, 100)
    },                                           // 退出提示信息
    quit () {
      this.cancel()
      this.$router.push({
        name: 'login'
      })
    },                                           // 退出登陆
    chooseImage () {
      this.avatars = true
      setTimeout(() => {
        this.$refs.avatars.className = 'box active'
      }, 100)
    },                                           // 选择图片(已经弃用)
    cancelImage () {
      this.$refs.avatars.className = 'box'
      setTimeout(() => {
        this.avatars = false
      }, 300)
    }                                            // 取消选择图片(已经弃用)
  }
}
</script>

<style lang="scss" scoped>
.home {
  background-image: linear-gradient(#ffddb4, #3d68be);
  overflow: hidden;
}
.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrapper {
  height: 100vh;
  transition: transform 0.3s;
  &.fix {
    transform: translateX(532px);
  }
}
header {
  flex: none;
  width: 100%;
  height: 98px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h3 {
    font-size: 48px;
    color: #5d331e;
  }
}
.icon {
  width: 44px;
  height: 44px;
  padding: 0 30px;
  cursor: pointer;
  color: #937200;
}
.meun {
  width: 532px;
  height: 100vh;
  z-index: 99;
  background-color: #535353;
  position: absolute;
  transform: translateX(-532px);
  transition: transform 0.3s;
  &.show {
    transform: translateX(0);
  }
}
.top {
  height: 266px;
  background-color: #fff;
  display: flex;
  img {
    width: 100%;
    height: 100%;
  }
  .avatar {
    position: relative;
    flex: 1;
    background-color: #4b539e;
    input {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
    }
  }
  .donation {
    flex: 1;
    background-color: #3d68be;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .bg {
      width: 78px;
      height: 75px;
      background-size: cover;
      background-image: url('/static/images/logo2.png');
    }
    p,
    span {
      color: #fce520;
      font-size: 48px;
    }
    span {
      font-size: 26px;
      opacity: 0.7;
    }
  }
}
li {
  cursor: pointer;
  background-color: #fff;
  height: 148px;
  border-bottom: 2px solid rgba(#1d1d26, 0.05);
  display: flex;
  align-items: center;
  p {
    flex: 1;
    font-size: 30px;
    color: #1d1d26;
  }
  .icon {
    padding: 0 60px 0 40px;
    color: #5d331e;
  }
  .qianjin {
    padding: 0 28px;
    color: #bbbbbe;
    width: 22px;
    height: 22px;
  }
}
.cards {
  flex: 1;
  flex-wrap: nowrap;
  width: 100%;
  display: flex;
  transition: transform 0.6s;
  &.trans0 {
    transform: translateX(0);
  }
  &.trans1 {
    transform: translateX(-682px);
  }
  &.trans2 {
    transform: translateX(-1364px);
  }
}
.card {
  &:first-child {
    margin-left: 20px;
  }
  flex: none;
  width: 678px;
  margin: 20px 20px 20px 0;
  border-radius: 10px;
  background-image: url('/static/images/giraffe.png');
  background-size: cover;
}
.tips-home {
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  overflow: hidden;
  .box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transform: translateY(100%);
    &.active {
      transform: translateY(0);
    }
  }
  .choose,
  .cancel {
    flex: none;
    width: 710px;
    height: 114px;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 40px;
  }
  .message {
    font-size: 24px;
    color: #666;
    flex: none;
    width: 710px;
    height: 92px;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: #fff;
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
  }
  .choose {
    cursor: pointer;
    border-bottom-left-radius: 26px;
    border-bottom-right-radius: 26px;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    color: #ff3b30;
    &.blue {
      color: #007aff;
    }
    &.fix {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-top-left-radius: 26px;
      border-top-right-radius: 26px;
    }
  }
  .cancel {
    cursor: pointer;
    border-radius: 26px;
    margin: 20px 0;
    color: #007aff;
  }
}
.mark {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background-color: rgba(128, 126, 126, 0.829);
  position: absolute;
  transform: translateX(400px);
  background-size: cover;
  &.fix {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }
}
</style>
